<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/common/taglibs.jsp" %>
<%@ taglib prefix="s" uri="/struts-tags" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!DOCTYPE html>
<html lang="en">
<head>
    <%@ include file="/common/common-css.v2.jsp" %>
    <style>
        #jquery-table td {
            cursor: pointer !important;
            word-break: break-all;
            word-wrap: break-word;
        }

        .load_bg {
            background: #000;
            opacity: 0.1;
            left: 0;
            top: 0;
            position: fixed;
            height: 100%;
            width: 100%;
            overflow: hidden;
            z-index: 10000;
        }

        .load_img {
            left: 50%;
            top: 180px;
            position: fixed;
            height: 50px;
            overflow: hidden;
            z-index: 20000;
        }
    </style>
</head>
<body class="no-skin">
<div class="load_bg" style="display:none;"></div>
<img src="http://img.xmiles.cn/commentloading.gif" class="load_img" style="display:none"/>
<div class="page-content">
    <form id="queryForm">
        <div class="page-content-area">
            <div class="row">
                <div class="col-sm-12">
                    <div class="widget-box" style="border:0 solid #ccc; border-top:none;border-bottom:none;">
                        <div class="widget-header widget-header-blue widget-header-flat">
                            <h4 class="widget-title">选择条件进行查询</h4>

                            <div class="widget-toolbar">
                                <a href="#" data-action="collapse">
                                    <i class="ace-icon fa fa-chevron-up"></i>
                                </a>
                            </div>
                        </div>

                        <div class="widget-body">
                            <div class="widget-main clearfix">

                                <div class="form-group col-xs-12 col-sm-4">
                                    <label class="col-sm-4 control-label" style="text-align:right"
                                           for="startDate">关注开始时间:</label>
                                    <div class="col-sm-8">
                                        <div class="input-daterange input-group">
                                            <input type="text" class="date-picker form-control"
                                                   data-date-format="yyyy-mm-dd" style="padding-left:0"
                                                   name="startDate" id="startDate" placeholder="请选择查询关注开始时间">
                                        </div>
                                    </div>
                                </div>

                                <div class="form-group col-xs-12 col-sm-4">
                                    <label class="col-sm-4 control-label" style="text-align:right"
                                           for="endDate">关注结束时间:</label>
                                    <div class="col-sm-8">
                                        <div class="input-daterange input-group">
                                            <input type="text" class="date-picker form-control"
                                                   data-date-format="yyyy-mm-dd" style="padding-left:0"
                                                   name="endDate" id="endDate" placeholder="请选择结查询关注束时间">
                                        </div>
                                    </div>
                                </div>

                                <div class="form-group col-xs-12 col-sm-4">
                                    <label class="col-sm-4 control-label" for="platform"
                                           style="text-align:right;">平台:</label>
                                    <div class="col-sm-8">
                                        <select class="form-control" name="platform" id="platform">
                                            <option value="-2">未知</option>
                                            <option value="-1" selected>全部</option>
                                            <option value="0">iOS</option>
                                            <option value="1">Android</option>
                                            <option value="2">其它</option>
                                        </select>
                                    </div>
                                </div>


                                <div class="form-group col-xs-12 col-sm-4">
                                    <label class="col-sm-4 control-label" for="channel"
                                           style="text-align:right;">渠道:</label>
                                    <div class="col-sm-8">
                                        <input type="text" class="form-control" name="channel" id="channel"
                                               placeholder="请填写查询渠道">
                                    </div>
                                </div>

                                <div class="form-group col-xs-12 col-sm-4">
                                    <label class="col-sm-4 control-label" for="type"
                                           style="text-align:right;">派券类型:</label>
                                    <div class="col-sm-8">
                                        <select class="form-control" name="type" id="type">
                                            <option value="-1" selected>全部</option>
                                            <option value="0">实物卡</option>
                                            <option value="1">不干胶</option>
                                        </select>
                                    </div>
                                </div>

                                <div class="form-group col-xs-12 col-sm-4">
                                    <label class="col-sm-4 control-label" for="phone"
                                           style="text-align:right;">手机号:</label>
                                    <div class="col-sm-8">
                                        <input type="text" class="form-control" name="phone" id="phone"
                                               placeholder="请填写查询手机号">
                                    </div>
                                </div>

                                <div class="form-group col-xs-12 col-sm-4">
                                    <label class="col-sm-4 control-label" for="wechat"
                                           style="text-align:right;">微信OPEN-ID:</label>
                                    <div class="col-sm-8">
                                        <input type="text" class="form-control" name="openId" id="wechat"
                                               placeholder="请填写查询微信OPEN-ID">
                                    </div>
                                </div>

                                <div class="form-group col-xs-12 col-sm-4">
                                    <label class="col-sm-4 control-label" for="couponChannel"
                                           style="text-align:right;">优惠码渠道:</label>
                                    <div class="col-sm-8">
                                        <s:select id="couponChannel" name="couponChannel" list="%{allChannels}" cssClass="form-control" headerKey="" headerValue="--全部渠道--"/>
                                    </div>
                                </div>

                                <div class="form-group col-xs-12 col-sm-4">
                                    <label class="col-sm-4 control-label" for="status"
                                           style="text-align:right;">领油状态:</label>
                                    <div class="col-sm-8">
                                        <select id="status" name="status">
                                            <option value="" selected>全部状态</option>
                                            <option value="0">已扫码</option>
                                            <option value="1">已访问</option>
                                            <option value="2">登记失败</option>
                                            <option value="3">登记成功</option>
                                            <option value="4">已激活</option>
                                        </select>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-12 center">
                    <div class="clearfix form-actions">
                        <button class="btn btn-purple no-border" type="button" name="btn-query" onclick="query()"
                                id="btn-query">
                            <i class="ace-icon fa fa-search icon-on-right bigger-110"></i>
                            查询
                        </button>
                        &nbsp;&nbsp;&nbsp;
                        <button class="btn btn-grey no-border" type="reset">
                            <i class="ace-icon fa fa-undo icon-on-right bigger-110"></i>
                            重置
                        </button>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-xs-12">
                    <table id="jquery-table" class="table table-striped table-bordered table-hover">
                    </table>
                </div>
            </div>

        </div>
    </form>
</div>


<%@ include file="/common/common-js.jsp" %>
<script type="text/javascript">
    var loadDom = $('.load_bg,.load_img');
    var jqTable = null;

    function query() {
        loadDom.show();
        if (jqTable != null) {
            jqTable.fnDraw();
        }
        else {
            loadData();
        }
    }

    var loadData = function () {
        jqTable = $('#jquery-table').dataTable({
            "columnDefs": [
                {
                    "title": '扫码日期',
                    "targets": [0],
                    "data": "scanDateTime",
                    "class": "center",
                    "bSortable": false,
                    "width": "40px"
                },
                {
                    "title": '二维码渠道',
                    "targets": [1],
                    "data": "codeChannel",
                    "class": "center",
                    "bSortable": false,
                    "width": "40px",
                    "render": function (data) {
                        if (!data) {
                            return '-';
                        }
                        else {
                            return data;
                        }
                    }
                },
                {
                    "title": '优惠码渠道',
                    "targets": [2],
                    "data": "channel",
                    "class": "center",
                    "bSortable": false,
                    "width": "40px",
                    "render": function (data) {
                        if (!data) {
                            return '-';
                        }
                        else {
                            return data;
                        }
                    }
                },
                {
                    "title": '平台',
                    "targets": [3],
                    "data": "platform",
                    "class": "center",
                    "bSortable": false,
                    "width": "50px",
                    "render": function (data) {
                        if (data != null) {
                            switch (data) {
                                case 0:
                                    return 'iOS';
                                case 1 :
                                    return 'Android';
                                case 2 :
                                    return '其它';
                                default :
                                    return '未定义';
                            }
                        }
                        else {
                            return '未知';
                        }

                    }
                },
                {
                    "title": '派券类型',
                    "targets": [4],
                    "data": "type",
                    "class": "center",
                    "bSortable": false,
                    "width": "40px",
                    "render": function (data) {
                        switch (data) {
                            case 0:
                                return '实物卡';
                            case 1:
                                return '不干胶';
                            default:
                                return '未知';
                        }
                    }
                },
                {
                    "title": '微信OPEN-ID',
                    "targets": [5],
                    "data": "openId",
                    "class": "center",
                    "bSortable": false,
                    "width": "40px",
                    "render": function (data) {
                        if (data.length > 15) {
                            return '<span title="' + data + '">' + data.slice(0, 10) + '...</span>';
                        }
                        else {
                            return data;
                        }
                    }
                },
                {
                    "title": '手机号',
                    "targets": [6],
                    "data": "phone",
                    "class": "center",
                    "bSortable": false,
                    "width": "40px",
                    "render" : function(data) {
                        if (data) return data;
                        return '-';
                    }
                },
                {
                    "title": '领油状态',
                    "targets": [7],
                    "data": "status",
                    "class": "center",
                    "bSortable": false,
                    "width": "40px",
                    "render": function (data) {
                        switch (data) {
                            case 0:
                                return '已扫码';
                            case 1:
                                return '已访问';
                            case 2:
                                return '登记失败';
                            case 3:
                                return '登记成功';
                            case 4:
                                return '<strong>已激活</strong>';
                            default:
                                return '未定义';
                        }
                    }
                },
                {
                    "title": '失败原因',
                    "targets": [8],
                    "data": "errorCode",
                    "class": "center",
                    "bSortable": false,
                    "width": "40px",
                    "render": function (data, display, obj) {
                        if (data && obj) {
                            if (obj.status === 3 || obj.status === 4) {
                                return '-';
                            }
                            switch (data) {
                                case 1:
                                    return '优惠码不存在';
                                case 2:
                                    return '优惠码不可用';
                                case 3:
                                    return '优惠码已过期';
                                case 4:
                                    return '服务器错误';
                                case 5:
                                    return '优惠码已使用';
                                case 6:
                                    return '优惠码已使用';
                                case 11:
                                    return '超过兑换次数限制';
                                case 12:
                                    return '超过优惠券领取时间限制';
                                default:
                                    return '未定义错误';
                            }
                        }
                        else {
                            return '-';
                        }

                    }
                }
            ],
            "sAjaxSource": ctx + "/weixin/weixin_activity_log_record.action",
            "fnServerData": function (url, aoData, fnCallback) {
                var data = $('#queryForm').serializeObject();
                data.aoData = JSON.stringify(aoData);

                $.ajax({
                    "type": "POST",
                    "dataType": 'json',
                    "url": url,
                    "data": data,
                    "success": function (resp) {
                        if (resp) {
                            fnCallback(resp);
                        }
                    },
                    "error": function (XMLHttpRequest, textStatus) {
                        alert(textStatus);
                    },
                    "complete": function () {
                        loadDom.hide();
                    }
                });
            },
            "sScrollXInner": "100%",
            "sScrollY": "100%",
            "aaSorting": [[0, "asc"]]
        });
    };

    jQuery(function ($) {
        $(".date-picker").datepicker({autoclose: true}).next().on(ace.click_event, function () {
            $(this).prev().focus();
        });

        $("#couponChannel").combobox();
    });
</script>
</body>
</html>